<html lang="en">

<head>
    <meta charset="utf-8"/>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://unpkg.com/lucky-canvas@1.7.25"></script>
    <!--    <script src="/js/lucky-canvas@1.7.25"></script>-->
    <title>抽奖系统</title>
    <style>
        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<div class="center" id="my-lucky"></div>
<script>
    var giftMap = new Map();
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "/gifts",
            success: function (gifts) {
                var prizes = new Array();
                $.each(gifts, function (index, gift) {
                    giftMap[gift.Id] = index;
                    prizes[index] = {background: "#e9e8fe", fonts: [{text: index}]}
                })
                const myLucky = new LuckyCanvas.LuckyWheel('#my-lucky', {
                    width: '300px',
                    height: '300px',
                    blocks: [{padding: '10px', background: '#617df2'}],
                    prizes: prizes,
                    buttons: [
                        {radius: '35%', background: '#8a9bf3'},
                        {radius: '40%', background: '#8a9bf3'},
                        {
                            radius: '40%', background: '#8a9bf3',
                            pointer: true,
                            fonts: [{text: '抽奖', top: '-10px'}]
                        }],
                    start: function () {
                        $.ajax({
                            type: "GET",
                            url: "/lucky",
                            success: function (giftId) {
                                if (giftId == "0") {
                                    alert("抽奖结束")
                                } else {
                                    myLucky.play();
                                    idx = giftMap[giftId];
                                    myLucky.stop(idx);
                                }
                            }
                        }).fail(function (result, result1, result2) {
                            alert("出错了");
                        });
                    },
                    end: function (prize) {
                        alert("恭喜您！中奖啦！您的奖品是：" + prize.fonts[0].text)
                    }
                })
            }
        }).fail(function (result, result1, result2) {
            $('#my-lucky').html("数据加载失败")
        });
    });
</script>
</body>
</html>